<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script src="./js/jquery/jquery.1.9.0.js"></script>
		<link rel="stylesheet" href="js/unpkg/unpkg.com_element-ui@2.15.13_lib_theme-chalk_index.css">
		<script src="./js/jquery/jquery.1.9.0.js"></script>
		<script src="js/unpkg/unpkg.com_vue@2.7.14_dist_vue.js"></script>
		<script src="js/unpkg/unpkg.com_element-ui@2.15.13_lib_index.js"></script>
		<script type="text/javascript">
			function initREM(){
					let screenWidth = document.documentElement.clientWidth;
					let rem = screenWidth/10;
					document.documentElement.style.fontSize=rem+'px';
			}
			window.addEventListener('resize',initREM,false)
			initREM()
			// console.log(screenWidth);
		</script>
	</head>
	<body>
		<div id="app">
			<img src="img/log.png" class="log" />
			<div class="background">
				<div class="b-right">
					<div class="headline">
						
						<div><img src="img/logt.png"/></div>
						<div>超视距综合用户管理信息系统</div>
					</div>

					<div class="login">
						<div class="login-button">
							<div class="login-t login-1 " :class="loginBox == 0?'login-blue':''"
								@click="loginBox=0,getVerifyt()">账号密码登录</div>
							<div class="login-t login-2" :class="loginBox == 1?'login-blue':''" @click="loginBox=1">
								手机验证码登录</div>
							<div class="login-t login-3" :class="loginBox == 2?'login-blue':''"
								@click="loginBox=2,getVerifyt()">注册</div>
						</div>
					</div>
					<div class="login-box">
						<div class="login-box-1" v-show='loginBox == 0'>
							<div class="input-user input">
								<img src="img/input-user.png" /><input type="text" v-model="loginUserData.username"
									placeholder="输入账号" />
							</div>
							<div class="input-pwd input">
								<img src="img/input-pwd.png" /> <input type="password" v-model="loginUserData.password"
									placeholder="输入密码" />
							</div>
							<!-- <div class="input-verify input"  v-show="root">
								<input type="text" v-model="loginUserData.code" placeholder="输入手机验证码" />
								<div class="input-verify-phone" @click="startCountdown3()">{{phoneText3}}</div>
							</div> -->
							
							<div class="input-verify" v-if="verifyNum>3">
								<div class="ix"></div>
								<input placeholder="输入验证码" v-model="loginUserData.captcha"  />
								<img :src='verify' class="verify-img"   @click="getVerifyt"/>
							</div>
							<div class="login-submit" @click="loginUser">登录</div>
							
						</div>

						<div class="login-box-1" v-show='loginBox == 1'>
							<div class="input-user input">
								<img class="img-phone" src="img/input-phone.png" /><input type="text"
									v-model="loginPhoneData.phone" placeholder="输入手机号码" />
							</div>
							<div class="input-verify input">
								<input type="text" v-model="loginPhoneData.code" placeholder="输入手机验证码" />
								<div class="input-verify-phone" @click="startCountdown()">{{phoneText}}</div>
							</div>
							<div class="input-verify" v-if="verifyNum>3">
								<div class="ix"></div>
								<input placeholder="输入验证码" v-model="loginPhoneData.captcha"  />
								<img :src='verify' class="verify-img"   @click="getVerifyt"/>
							</div>
							

							<div class="login-submit" @click="loginPhone">登录</div>
						</div>

						<div class="login-box-1" v-show='loginBox == 2'>
							<div class="input-user input">
								<img src="img/input-user.png" /><input type="text" v-model="registerData.username"
									placeholder="输入账号" />
							</div>
							<div class="input-user input">
								<img class="img-phone" src="img/input-phone.png" /><input type="text"
									v-model="registerData.phone" placeholder="输入手机号码" />
							</div>
							<div class="input-pwd input">
								<img src="img/input-pwd.png" /> <input type="password" v-model="registerData.password"
									placeholder="设置密码" />
							</div>
							<div class="input-verify input">
								<input type="text" v-model="registerData.code" placeholder="输入手机验证码" />
								<div class="input-verify-phone" @click="startCountdown2()">{{phoneText2}}</div>
							</div>
							<div class="input-verify">
								<div class="ix"></div>
								<input placeholder="输入验证码" v-model="registerData.captcha" />
								
									<img :src='verify' class="verify-img"   @click="getVerifyt"/>
								
							</div>
							<div class="login-submit" @click="register">提交注册申请</div>
						</div>


					</div>

					<div class="login-box">

					</div>
				</div>

			</div>
		</div>
	</body>
</html>

<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/element-ui.js"></script>
<script>
	new Vue({
		el: '#app',
		data: function() {
			return {
				url: "http://192.168.1.18:9000",
				verify: '',
				verifyNum:0,
				verifyId: '',
				phoneText: '发送验证码',
				phoneText2:'发送验证码',
				phoneText3:'发送验证码',
				countdown:0,
				countdown2:0,
				countdown3:0,
				root:false,
				// buttonText
				loginBox: 0,
				loginUserData: { //账号登录
					username: '',
					password: '',
					captcha: '',
					phone:'',
					code:'',
				},
				loginPhoneData: { //手机登录
					phone: '',
					code: '',
					captcha:'',
				},
				registerData: { //注册
					username: '',
					password: '',
					phone: '',
					captcha: '',
					code:'',
				},
				img:{
					
				}
			}
		},
		mounted() {
			this.getVerifyt(); // 调用该方法来初始化图片
		},
		methods: {
			getVerifyt(id) {
				this.verifyId = 'login';
				const width = Math.trunc(9*16);
				const height = Math.trunc(2.4*16);
				const url = this.url + '/system/view/captcha?id=' + this.verifyId +'&b='+ new Date().getTime() 
				+ '&size=' + width + '_' + height;
				this.verify = url;
			},
			loginUser() {
				
				let data = {
					username: this.loginUserData.username,
					password: this.loginUserData.password,
					password: this.loginUserData.password,
					platformCode:'WangWenQiang'
				}
			
				if(this.verifyNum > 2){
					data = {
						username: this.loginUserData.username,
						password: this.loginUserData.password,
						captchaId: "login",
					}
				}
				
				$.ajax({
					type: "POST", // 设置请求方法为 POST
					url: this.url + '/system/user/login',
					context: document.body,
					
					data: data,
					success: (res) => {
						if(res.msg == "缺少图形验证码"){
							 this.$message.error("请输入图像验证码");
							this.verifyNum = 10;
						}else if(res.code != 200){
							this.verifyNum += 1;
							this.$message.error(res.msg);
						}
						else{
							this.$message.success("登录成功!");
						}
					},
					error: (xhr, status, error) => {
						this.$message.error('请求失败')
						this.verifyNum += 1;
					}


				});
			},
			loginPhone() {
				
				let data = {
				phone: this.loginPhoneData.phone,
				code: this.loginPhoneData.code,
				platformCode:'WangWenQiang'
				}
							
				if(this.verifyNum > 2){
					data = {
						phone: this.loginPhoneData.phone,
						code: this.loginPhoneData.code,
						captcha:this.loginPhoneData.captcha,
						captchaId: "login",
					}
				}
				
				$.ajax({
					type: "POST", // 设置请求方法为 POST
					url: this.url + '/system/user/login',
					context: document.body,
					data:data,
					success: (res) => {
						console.log(res)
						 if(res.msg == "缺少图形验证码"){
							 this.$message.error("请输入图像验证码");
							this.verifyNum = 10;
						}else if(res.code != 200){
							this.verifyNum += 1;
							this.$message.error(res.msg);
						}
						else{
							this.$message.success("登录成功!");
						}
					},
					error: (xhr, status, error) => {
						this.verifyNum += 1;
						this.$message.error('请求失败')
					
					}
				});
			},
			register() {
				
				let data =  {
						username: this.registerData.username,
						password: this.registerData.password,
						phone: this.registerData.phone,
						captcha: this.registerData.captcha,
						captchaId: "register",
				}
				
				$.ajax({
					type: "POST", // 设置请求方法为 POST
					url: this.url + '/system/user/register',
					context: document.body,
					data:data,
					success: (res) => {
						console.log(res)
						if(res.code != 200){
							
							this.$message.error(res.msg);
						}else{
							this.$message.error("注册成功!");
						}
					},
					error: (xhr, status, error) => {
						
						this.$message.error("POST请求失败"+ status + error)
					}
				});
			},
			getNote(phone) {
				$.ajax({
					type: "POST", // 设置请求方法为 POST
					url: this.url + '/hwcloud/sms/code',
					context: document.body,
					data: {
						phone: phone,
					},
					success: (res) => {
						console.log(res)
						this.$message.success('验证码已发送')
					},
					error: (xhr, status, error) => {
						
						this.$message.error('请求失败')
					
					}
				});
			},
			startCountdown() {
			      if (this.countdown > 0) {
			        return; // 如果正在倒计时中，不允许再次点击
			      }else{
						this.getNote(this.loginPhoneData.phone);
					}
			
			      this.countdown = 60; // 设置倒计时初始值
			      this.phoneText = this.countdown + 's重新发送';
			
			      // 启动定时器，每秒更新倒计时时间
			      const timer = setInterval(() => {
			        this.countdown--; // 倒计时减1
			        this.phoneText = this.countdown + 's重新发送';
			
			        // 当倒计时结束时
			        if (this.countdown <= 0) {
			          clearInterval(timer); // 清除定时器
			          this.phoneText = '获取验证码'; // 恢复按钮文本
			        }
			      }, 1000); // 定时器间隔为1秒
			    },
				
				startCountdown2() {
				      if (this.countdown2 > 0) {
				        return; // 如果正在倒计时中，不允许再次点击
				      }else{
						  this.getNote(this.registerData.phone);
					  }
				
				      this.countdown2 = 60; // 设置倒计时初始值
				      this.phoneText2 = this.countdown2 + 's重新发送';
				
				      // 启动定时器，每秒更新倒计时时间
				      const timer = setInterval(() => {
				        this.countdown2--; // 倒计时减1
				        this.phoneText2 = this.countdown2 + 's重新发送';
				
				        // 当倒计时结束时
				        if (this.countdown2 <= 0) {
				          clearInterval(timer); // 清除定时器
				          this.phoneText2 = '获取验证码'; // 恢复按钮文本
				        }
				      }, 1000); // 定时器间隔为1秒
				    },

		}
	})
	

</script>



<style type="text/css">
	
	
	.background{
		width: 10rem;
		height: calc(100vh - 0.44rem);
		background: url("img/background.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		margin: 0;
		padding: 0;
		display: flex;
	}

	.el-message{
		text-align: center !important;
	}
	
	.el-message .el-icon-success{
		
		display: none;
	}
	.el-message .el-icon-error{
		display: none;
	}
</style>